<template>
	<view class="container">

		<!-- 空白页 -->
		<view v-if="empty" class="empty">
			<image src="/static/emptyCart.jpg" mode="aspectFit"></image>
			<view class="empty-tips">
				空空如也
				<navigator class="navigator" url="../index/index" open-type="switchTab">扫一扫条形码></navigator>
			</view>
		</view>
		<view v-else>
			<!-- 列表 -->
			<view class="cart-list">
				<block v-for="(item, index) in cartList" :key="index">
					<view class="cart-item" :class="{ 'b-b': index !== cartList.length - 1 }">
						<view style='width: 230upx;height: 230upx;position: relative;'>
							<image style="width:100px; height:100px;border-radius: 8upx;" :src="item.picture"
								mode="aspectFill" @click="navToGoodsDetail(item.id)"></image>
						</view>
						<view class="item-right">
							<text class="clamp title">{{ item.goodname }}</text>
							<text class="attr"></text>
							<text class="price" style="color: #f2270c;">
								¥<text style="font-size: 40rpx;font-weight: bold;">{{ item.price }}</text>
							</text>
							<uni-number-box type="number" class="step" :min="1" :max="99" :value="item.buynumber"
								:index="index" @eventChange="numberChange"></uni-number-box>

						</view>
						<text class="del-btn yticon icon-fork" @click="deleteCartItem(item)"></text>
					</view>
				</block>
			</view>
			<view class="action-section">
				<view class="checkbox">
					<view class="clear-btn" :class="{ show: allChecked }" @click="emptyCart">清空</view>
				</view>
				<view class="total-box">
					<text class="price"><text style="color: #262626;font-size: 24rpx;vertical-align: baseline;">合计:
						</text> ¥{{ totalPrice }}</text>
				</view>
				<button type="primary" class="no-border confirm-btn" @click="createOrder">去结算({{ cartList.length
				}})</button>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import uniNumberBox from '@/components/uni-number-box.vue';
export default {
	components: {
		uniNumberBox
	},
	data() {
		return {
			total: 0, //总价格
			reduce: 0, //优惠
			allChecked: false, //全选状态  true|false
			empty: true, //空白页现实  true|false
			cartList: [],
		};
	},
	onLoad() {

	},
	onShow() {
		if (this.token) {
			this.loadData()
		} else {
			this.empty = true;
		}
	},
	onPullDownRefresh() { // 下拉刷新
		if (this.token) {
			this.loadData()
		}
	},
	watch: {
		cartList(val) {
			let empty = val.length === 0 ? true : false;
			if (this.empty !== empty) {
				this.empty = empty;
			} else {
				this.sonRefresh = true;
			}
		}
	},
	computed: {
		...mapState('user', ['token', 'userinfo']),
		...mapState('cart', ['mycart']),
		totalPrice: function () {
			let total = 0;
			for (let item of this.cartList) {
				total += item.price * item.buynumber
			}
			return total.toFixed(2);
		}
	},
	onUnload(){},
	methods: {
		...mapMutations('cart', ['setCart', 'clearCart']),
		loadData() {
			const params = {
				userid: this.userinfo.id,
				page: 1,
				limit: 15,
			}
			this.$ajax.get('cart/list', params).then(data => {
				if (data.success) {
					this.cartList = data.result;
					this.empty = false;
					this.setCart(data.result);
				} else {
					this.$toast(data.msg);
				}
			});
			uni.stopPullDownRefresh();
		},

		navToLogin() {
			this.navigateTo('public/login');
		},

		//选中状态处理
		check(type, index) {
			if (type === 'item') { // 单个选中
				this.cartList[index].checked = !this.cartList[index].checked;
			} else {
				const checked = !this.allChecked;
				const list = this.cartList;
				list.forEach(item => {
					item.checked = checked;
				});
				this.allChecked = checked;
			}

		},
		//数量
		numberChange(e) {
			// 如果输入的数字小于1，则默认为1，如果输入小数，则四舍五入为整数
			let num = Math.round(e.number);
			if (num < 1) {
				num = 1;
			}
			this.cartList[e.index].buynumber = num;

			this.setCart(this.cartList);
			const params = {
				userid: this.userinfo.id,
				goodid: this.cartList[e.index].goodid,
				buynumber: e.number,
			}

			this.$ajax.get('cart/update', params).then(res => {
				if (res.success) {
					this.loadData();
				}
			})
		},
		//删除对应商品
		deleteCartItem(item) {
			const that = this;
			uni.showModal({
				content: '确认要删除此商品？',
				confirmText: '删除',
				cancelText: '取消',
				confirmColor: '#f2270c',
				success: e => {
					if (e.confirm) {
						const params = {
							userid: that.userinfo.id,
							id: item.id
						}
						that.$ajax.get('cart/detail/delete', params).then(res => {
							if (res.success) {
								that.loadData();
							} else {
								that.$toast('删除失败');
							}
						}).catch(() => {
							that.$toast('删除失败');
						})
						// this.$api.setCartBadge(this.mycart.length);
					}
				}
			})
		},
		emptyCart() {
			let that = this;
			uni.showModal({
				content: '清空购物车？',
				success: e => {
					if (e.confirm) {
						that.clearCart();
						// that.$api.setCartBadge(0);
						this.loadData();
					}
				}
			});

		},

		//创建订单
		createOrder() {
			if (!this.token) {
				this.$api.msg('请先登录');
				setTimeout(function () {
					return uni.navigateTo({
						url: '/pages/public/login'
					})
				}, 500)
			}
			uni.navigateTo({
				url: `/pages/order/createOrder`
			});
		},
		navToGoodsDetail(id) {
			return uni.navigateTo({
				url: `/pages/product/product?id=${id}`
			});
		},
	}
};
</script>

<style lang="scss">
button::after {
	border: none;
}

.container {
	padding-bottom: 134upx;

	/* 空白页 */
	.empty {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		padding-bottom: 100upx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		background: #fff;

		image {
			width: 300upx;
			height: 254upx;
			margin-bottom: 30upx;
		}

		.empty-tips {
			display: flex;
			font-size: $font-sm + 2upx;
			color: $font-color-disabled;

			.navigator {
				color: $uni-color-primary;
				margin-left: 16upx;
			}
		}
	}
}

/* 购物车列表项 */
.cart-item {
	display: flex;
	position: relative;
	padding: 25upx 34upx;

	.image-wrapper {
		width: 230upx;
		height: 230upx;
		flex-shrink: 0;
		position: relative;

	}

	.checkbox {
		position: absolute;
		left: -16upx;
		top: -16upx;
		z-index: 8;
		font-size: 44upx;
		line-height: 1;
		padding: 4upx;
		color: $font-color-disabled;
		background: #fff;
		border-radius: 50px;
	}

	.item-right {
		display: flex;
		flex-direction: column;
		flex: 1;
		overflow: hidden;
		position: relative;
		padding-left: 30upx;

		.title,
		.price {
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			height: 30upx;
			line-height: 30upx;
		}

		.attr {
			font-size: $font-sm + 2upx;
			color: $font-color-light;
			height: 40upx;
			line-height: 40upx;
		}

		/deep/ .uni-numbox {
			width: 200rpx !important;
			height: 60rpx !important;
		}

		/deep/ .uni-numbox-minus,
		.uni-numbox-plus {
			line-height: 60rpx !important;
		}

	}

	.del-btn {
		padding: 4upx 10upx;
		font-size: 34upx;
		height: 50upx;
		color: $font-color-light;
	}
}

/* 底部栏 */
.action-section1 {
	/* #ifdef H5 */
	margin-bottom: 230upx;
	/* #endif */

	/* #ifndef H5 */
	margin-bottom: 80upx;
	/* #endif */
	position: fixed;
	left: 100upx;
	bottom: 35upx;
	z-index: 99;
	display: flex;
	padding: 0 50upx;

	.tip-btn {
		padding: 0 30upx;
		margin: 0;
		border-radius: 10px;
		height: 70upx;
		line-height: 70upx;
		font-size: $font-lg;
		background: $nav-text;
		color: $nav-bg;
		border: 2upx solid $nav-color-blue;
	}
}

.action-section {
	/* #ifdef H5 */
	margin-bottom: 100upx;
	/* #endif */
	position: fixed;
	left: 30upx;
	bottom: 5upx;
	z-index: 95;
	display: flex;
	align-items: center;
	width: 690upx;
	height: 130upx;
	padding: 0 30upx;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.1);
	border-radius: 16upx;

	.checkbox {
		height: 52upx;
		position: relative;

		image {
			width: 52upx;
			height: 100%;
			position: relative;
			z-index: 5;
		}
	}

	.clear-btn {
		position: absolute;
		left: 26upx;
		top: 0;
		z-index: 4;
		width: 0;
		height: 52upx;
		line-height: 52upx;
		padding-left: 38upx;
		font-size: $font-base;
		color: #fff;
		background: $font-color-disabled;
		border-radius: 0 50px 50px 0;
		opacity: 0;
		transition: 0.2s;

		&.show {
			opacity: 1;
			width: 120upx;
		}
	}

	.total-box {
		flex: 1;
		display: flex;
		flex-direction: column;
		text-align: right;
		padding-right: 40upx;

		.price {
			font-size: 40rpx;
			color: #f2270c;
			font-weight: bolder;
		}

		.coupon {
			font-size: $font-sm;
			color: $font-color-light;

			text {
				color: $font-color-dark;
			}
		}
	}


	.confirm-btn {
		padding: 0 38upx;
		margin: 0;
		border-radius: 100px;
		height: 76upx;
		line-height: 76upx;
		font-size: $font-base + 2upx;
		background: $nav-color-blue;
	}
}

/* 复选框选中状态 */
.action-section .checkbox.checked,
.cart-item .checkbox.checked {
	color: $nav-color-blue;
}

.container .empty .saomagou {
	position: absolute;
	bottom: 120rpx;
	display: flex;
	flex-direction: column;
	align-items: center;

	.saomagou-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}

	.text {
		font-size: 28rpx;
		color: #1e7cde;
	}
}

.dianjisaoma {
	display: flex;
	align-items: center;
	margin-right: 15rpx;

	.dianjisaoma-icon {
		width: 60rpx;
		height: 60rpx;
		margin-right: 8rpx;
	}

	.dianjisaoma-icon1 {
		width: 120rpx;
		height: 120rpx;
		margin-right: 15rpx;
	}
}
</style>
